<template>
  <div class="month-tag">
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="valueVModel" @change="handleCheckedGroupChange">
      <el-checkbox v-for="month in monthOptions" :label="month.value" :key="month.value">{{month.label}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
const monthOptions = [
  { label: '一月', value: '1' },
  { label: '二月', value: '2' },
  { label: '三月', value: '3' },
  { label: '四月', value: '4' },
  { label: '五月', value: '5' },
  { label: '六月', value: '6' },
  { label: '七月', value: '7' },
  { label: '八月', value: '8' },
  { label: '九月', value: '9' },
  { label: '十月', value: '10' },
  { label: '十一月', value: '11' },
  { label: '十二月', value: '12' }
]

export default {
  name: 'MonthTimePicker',
  props: {
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkAll: false,
      checkedMonths: [],
      monthOptions: monthOptions,
      isIndeterminate: false
    };
  },
  computed: {
    valueVModel: {
      get () {
        return this.value || []
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    handleCheckAllChange (val) {
      this.checkedMonths = this.$emit('input', val ? monthOptions.map(item => item.value) : undefined);
      this.isIndeterminate = false;
    },
    handleCheckedGroupChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.monthOptions.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.monthOptions.length;
    }
  }
}
</script>
